<template>
    <div>
        <!-- 头部：新增 + 搜索 -->
        <el-row style="margin: 10px">
            <el-col :span="12">
        <span>
        <el-button type="primary" @click="showNewInfo()">新增范围</el-button>
      </span>
                <span style="margin-left:80px;font-size:13px;color: #6b6a6a">说明：该OAuth系统通过获取 '范围标签' 进行授权 '范围权限'，因此范围权限可以用作鉴权</span>
            </el-col>
            <el-col :span="12">
        <span style="float: right">
          <el-input style="width: 200px" v-model="query" placeholder="输入搜索内容"/>
          <el-button type="primary" style="margin-left: 10px" @click="queryScope()">搜索</el-button>
        </span>
            </el-col>
        </el-row>

        <!-- 中间：列表 + 修改 + 删除 -->
        <el-row>
            <el-table :data="scopeList" border style="width: 100%;margin-left: 5px;margin-right: 5px">
                <el-table-column prop="id" label="范围Id" width="180"/>
                <el-table-column prop="name" label="范围名称" width="180"/>
                <el-table-column prop="tag" label="范围标签"/>
                <el-table-column prop="permission" label="范围权限"/>
                <el-table-column prop="remarks" label="范围描述"/>
                <el-table-column fixed="right" label="操作" width="120">
                    <template #default="scope">
                        <el-button link type="primary" size="small" @click="showEditInfo(scope.row)">修改</el-button>
                        <el-button link type="primary" size="small" @click="deleteInfo(scope.row.tag)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-row>

        <!-- 分页 -->
        <el-row :justify="'center'" style="margin-top: 10px">
            <el-pagination
                    :current-page=currentPage
                    :total=totalPage
                    @current-change="currentChange"
                    layout="prev, pager, next"
            />

        </el-row>

        <!-- 模态 -->
        <el-dialog
                v-model="showModel"
                title="用户信息"
                width="30%"
        >
            <el-form :model="scopeInfo" label-width="120px">
                <el-form-item label="范围名称">
                    <el-input v-model="scopeInfo.name"/>
                </el-form-item>
                <el-form-item label="范围标签">
                    <el-input v-model="scopeInfo.tag"/>
                </el-form-item>
                <el-form-item label="范围权限">
                    <el-input v-model="scopeInfo.permission"/>
                </el-form-item>
                <el-form-item label="范围描述">
                    <el-input v-model="scopeInfo.remarks"/>
                </el-form-item>
            </el-form>
            <template #footer>
      <span class="dialog-footer">
        <el-button @click="addOrUpdateInfo">提交</el-button>
        <el-button type="primary" @click="showModel = false">取消</el-button>
      </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import {onMounted, reactive, ref} from "vue";
import {ElMessage, ElMessageBox} from 'element-plus'
import request from "/@/plugins/request.js";

const getScopePage = () => {
    request.get(`/admin/scope?page=${currentPage.value}&size=${pageSize.value}`).then((res) => {
        scopeList.value = res.data.data;
        totalPage.value = res.data.total;
    })
}

const addScopeRequest = () => {
    request.post('/admin/scope/add', scopeInfo).then((res) => {
        ElMessage(res.data.msg);
        getScopePage()
    })
}

const deleteScopeRequest = (tag) => {
    request.delete("/admin/scope/" + tag).then((res) => {
        ElMessage(res.data.msg);
        getScopePage()
    })
}

const queryScopeRequest = () => {
    request.get("/admin/scope/" + query.value).then((res) => {
        scopeList.value = res.data.data
    })
}

onMounted(() => {
    getScopePage()
})

/**
 * 这是一个完整的curd + 表格 + 分页 + 搜索的模板，需要注意修改体系本身就行
 * 1.尝试写为公用部分
 * 2.优化ui布局百分比随动问题
 */

const scopeInfo = reactive({
    id: 0,
    name: "",
    tag: "",
    permission: "",
    remarks: "",
})

const scopeList = ref([{
    id: 1,
    name: "用户头像，用户名称",
    tag: "userinfo",
    permission: "userinfo",
    remarks: "外部用户权限",
}])

// 分页数量
const pageSize = ref(10)
// 分页
const totalPage = ref(1)  // 这个是后端的数据
const currentPage = ref(1)
const currentChange = (currentPages) => { // current-page 改变时触发
    currentPage.value = page
}

// 模态框
const showModel = ref(false)

const showNewInfo = () => {   // 新增
    resetInfo()
    showModel.value = true
}
const showEditInfo = (rowUserInfo) => {// 修改
    scopeInfo.id = rowUserInfo.id
    scopeInfo.name = rowUserInfo.name
    scopeInfo.tag = rowUserInfo.tag
    scopeInfo.permission = rowUserInfo.permission
    scopeInfo.remarks = rowUserInfo.remarks
    showModel.value = true
}

const resetInfo = () => {   // 需要清空
    scopeInfo.id = 0
    scopeInfo.name = ""
    scopeInfo.tag = ""
    scopeInfo.permission = ""
    scopeInfo.remarks = ""
}

// crud
const addOrUpdateInfo = () => {
    const isEmpty = Object.entries(scopeInfo).every(([key, value]) => key === "id" || value === "" || value === undefined);
    if (isEmpty) {
        ElMessage("请填写必要字段");
    } else {
        addScopeRequest()
        showModel.value = false
    }
}

const deleteInfo = (tag) => {
    ElMessageBox.confirm('是否删除权限' + tag, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        deleteScopeRequest(tag)
    }).catch(() => {
        // 取消删除操作
        ElMessage('取消')
    });
}

// 搜索
const query = ref()
const queryScope = () => {
    if (query.value === undefined || query.value === "") {
        getScopePage()
    } else {
        queryScopeRequest()
    }
}
</script>

<style scoped>

</style>